<template>
  <div>
    <div class="container">
      <div class="header">
        <h2 class="title">网工1902核酸登记情况</h2>
      </div>

      <div class="sendInfo">
        <!-- 姓名 -->
        <van-form @submit="onSubmit">
          <van-field v-model.lazy="name" label="姓名" required placeholder="请输入姓名" autofocus />
          <van-field v-model.lazy="num" label="学号" type="number" required maxlength="11" placeholder="请输入学号" />

          <van-field readonly clickable name="calendar" :value="value" label="日历" required placeholder="点击选择日期"
            @click="showCalendar = true" />
          <van-calendar v-model="showCalendar" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate"
            color="	#00BFFF" />

          <div class="pre-pic">
            <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead" :preview-size="200" />
          </div>
          <van-button round block type="info" native-type="button" @click="onSubmit">提交</van-button>
        </van-form>
      </div>
    </div>
    <div class="version">版本-2.1.4</div>

    <load-view v-show="loading"></load-view>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant"
import LoadView from "@/components/LoadView"
export default {
  data () {
    return {
      // 姓名
      name: "",
      // 学号
      num: "",
      // 日期
      dd: "",
      // 日历的展示
      show: false,
      // 日期
      value: "",
      showCalendar: false,
      // 加载层
      loading: false,
      // data
      datas: new FormData(),
      // 图片是否加载成功
      upload: false,
      // 最小日期与最大日期
      minDate: new Date(),
      maxDate: new Date(),
      fileList: [],
    }
  },
  components: {
    LoadView,
  },
  mounted () {
    // 日历可选的时间为5天前到当前日期
    this.maxDate = new Date(this.getNextDate())
    this.minDate = new Date(this.getNextDate(-5))
    this.name = localStorage.getItem('HSname') ?? ''
    this.num = localStorage.getItem('HSnum') ?? ''
    console.log('获取到的内容为', this.name, this.num)
  },

  methods: {
    //   获取几天前日期的函数
    getNextDate (day) {
      // 如果有传递过来的参数
      let dd = new Date()
      if (day) {
        dd.setDate(dd.getDate() + day)
        let year = dd.getFullYear()
        let month = dd.getMonth() + 1
        let dds = dd.getDate()
        return year + "-" + month + "-" + dds
      }
      //   如果没有参数传递，那么
      else {
        let year = dd.getFullYear()
        let month = dd.getMonth() + 1
        let dds = dd.getDate()
        return year + "-" + month + "-" + dds
      }
    },
    // 提交时触发
    onSubmit () {
      if (!this.name) {
        Dialog.alert({
          title: "提示",
          message: "姓名不能为空",
        }).then(() => {
          Dialog.close()
        })
        return
      }
      if (!this.num) {
        Dialog.alert({
          title: "提示",
          message: "学号不能为空",
        }).then(() => {
          Dialog.close()
        })
        return
      }
      if (!this.value) {
        Dialog.alert({
          title: "提示",
          message: "日期不能为空！",
        }).then(() => {
          Dialog.close()
        })
        return
      }
      if (!this.upload) {
        Dialog.alert({
          title: "提示",
          message: "图片不能为空",
        }).then(() => {
          Dialog.close()
        })
        return
      }
      let d = new Date()
      let y = String(d.getFullYear())
      let mm = this.value.trim().split('/')
      let m = Number(mm[0]) < 10 ? '0' + String(mm[0]) : String(mm[0])
      let dd = Number(mm[1]) < 10 ? '0' + String(mm[1]) : String(mm[1])
      let newDate = y + '-' + m + '-' + dd
      this.datas.append("name", this.name)
      this.datas.append("num", this.num)
      this.datas.append("date", newDate)
      this.loading = true
      this.$axios.post(
        "http://miubai.website:8084/info",
        // 'http://zx529.xyz:8084/info',
        this.datas
      )
        .then((res) => {
          this.loading = false
          if (res.data.status) {
            // console.log(res)
            let result = res.data.filesave.trim().split('-')
            localStorage.setItem('HSname', this.name)
            localStorage.setItem('HSnum', this.num)
            Toast.success({
              duration: 4000, // 持续展示 toast
              forbidClick: true,
              message: `提交成功！\n ${result[0].slice(-2)}\n${result[1]}-${result[2]}-${result[3]}`
            })
            // localStorage.setItem('HSname', this.name)
            // localStorage.setItem('HSnum', this.num)
            this.num = ''
            this.date = ""
            this.name = ""
            this.value = ""
            this.fileList = []
          }
          else {
            Toast.file("提交有误！")
          }

        })
        .catch((err) => {
          this.loading = false
          console.log(err)
          Toast.fail("提交失败")
        })
    },
    afterRead (file) {
      this.upload = true
      console.log(file)
      this.datas.append("pic", file.content)
      file.status = "uploading"
      file.message = "上传中..."

      setTimeout(() => {
        file.status = "done"
        file.message = "上传成功"
      }, 1000)
    },

    formatDate (dd) {
      return `${dd.getMonth() + 1}/${dd.getDate()}`
    },
    onConfirm (dd) {
      this.value = `${dd.getMonth() + 1}/${dd.getDate()}`
      this.showCalendar = false
    },
  },
}
</script>

<style>
.header {
  margin-bottom: 80px;
  font-family: "幼体 微软雅黑 仿宋 楷体";
  margin-top: 20px;
}

.sendInfo {
  padding: 0 40px;
}

.date {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
}

.van-cell__title {
  width: 80px;
  height: 24px;
  text-align: right;
  font-size: 16px;
}

.van-cell__value span {
  display: block;
  font-size: 16px;
  width: 60px;
  height: 24px;
  text-align: left;
  width: 50px;
}

.show-date .van-cell {
  justify-content: center;
}

.van-uploader__input {
  margin-bottom: 40px;
}

.pre-pic {
  margin-top: 60px;
  margin-bottom: 60px;
}

.version {
  color: #818a94;
  margin-top: 20px;
}
</style>